<template>
  <div>
    <h2>更改字号的方案</h2>
    <select ref="fontSize" v-model="fontSize" class="select">
      <option v-for="(item, index) in fontSizeList" :key="index" :value="item.value" class="option">{{ item.name }}</option>
    </select>
    <!-- 编辑器 -->
    <div ref="editorForm"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
export default {
  data() {
    return {
      // 真正的编辑器里的内容
      editorContent: '',
      // 编辑器对象
      editor: null,
      // 当前字号
      fontSize: '16px',
      // 字号列表
      fontSizeList: [
        {name: '12px', value: '12px'},
        {name: '14px', value: '14px'},
        {name: '15px', value: '15px'},
        {name: '16px', value: '16px'},
        {name: '18px', value: '18px'},
        {name: '20px', value: '20px'},
        {name: '24px', value: '24px'}
      ]
    }
  },
  watch: {
    // 监听 fontSize 是否改变
    fontSize() {
      // 获取选区数据，修改字号
      let container = this.editor.selection.getSelectionContainerElem()[0]
      if (container.style.fontSize !== this.fontSize) {
        container.style.fontSize = this.fontSize
      }
    }
  },
  mounted() {
    // 初始化
    this.editor = new E(this.$refs.editorForm)
    // 当编辑器内容变化的时候通知父组件
    this.editor.customConfig.onchange = (html) => {
      // 设置当前选区内容字号跟选择的一致
      let container = this.editor.selection.getSelectionContainerElem()[0]
      if (container.style.fontSize === '') {
        container.style.fontSize = this.fontSize
      } else {
        this.fontSize = container.style.fontSize
      }
      this.editorContent = html
    }
    // 当获取焦点时再检查一次选区内容和字号
    this.editor.customConfig.onfocus = () => {
      let container = this.editor.selection.getSelectionContainerElem()[0]
      if (container.style.fontSize === '') {
        container.style.fontSize = this.fontSize
      } else {
        this.fontSize = container.style.fontSize
      }
    }
    // 自定义菜单配置
    this.editor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'image',  // 插入图片
      'table',  // 表格
      'video',  // 插入视频
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ]
    this.editor.create()
    this.editor.txt.html(this.editorContent)
  },
  methods: {
  }
}
</script>
<style scoped>
select{
  width: 100px;
  height: 30px;
  border-radius: 5px;
  margin-bottom: 5px;
  text-align: center;
}
</style>
